<template>
    <van-swipe-cell class="browsing-product-list-item">
        <van-card :thumb="product.imageUrl" :title="product.name" :price="product.price" @click.stop="handleRouteToProduct"/>
        <template #right>
            <van-button square text="删除" type="danger" @click.stop="$emit('delete', product)"/>
        </template>
    </van-swipe-cell>
</template>

<script>
  import { Button, Card, SwipeCell } from "vant"
  import { browsing } from "@mall/api-services"

  export default {
    name: "BrowsingProductListItem",
    components: {
      [Button.name]: Button,
      [Card.name]: Card,
      [SwipeCell.name]: SwipeCell,
    },
    props: {
      product: browsing.BrowsingProduct,
    },
    methods: {
      handleRouteToProduct() {
        const { product } = this
        this.$router.push(`/products/${product.id}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .browsing-product-list-item {
        background: #fff;

        .van-button {
            height: 100%;
        }

        .van-card {
            background: inherit;
        }
    }
</style>
